<script setup>
import { ref, inject } from "vue";
import VModelChildView from "./VModelChildView.vue";
const text = ref("默认文本");
</script>

<template>
    <!-- 
    v-model的基本使用：是对表单元素进行双向数据绑定的指令
    本质上就是v-bind和v-on：input的语法糖
    -->
  <div>
    父组件
    <input
      type="text"
      :value="text"
      @input="(event) => (text = event.target.value)"
    />
    <input type="text" v-model="text" />
    <!-- v-model的高级使用 -->
     <!-- 可以在自定义组件上使用，在自定义组件上使用的时候其实就是v-bind：modelValue和@update：modelValue的语法糖 -->
    <VModelChildView v-model="text"></VModelChildView>
  </div>
</template>

<style scoped></style>
